const webpack = require('webpack');
//添加别名
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir); //path.join(__dirname)设置绝对路径
}

module.exports = {
  //部署应用包时的基本 URL, 在vue-cli.3.3版本后baseUrl被废除了,因此要写成 publicPath
  publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
  //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: 'dist',
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'assets',
  // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  lintOnSave: true,
  //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  runtimeCompiler: true,
  // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
  productionSourceMap: true,

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },

  // css相关配置
  /*     css: {
         // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
         // extract: true,
         // 开启 CSS source maps?
         sourceMap: false,
         // css预设器配置项
         loaderOptions: {},
         // 启用 CSS modules for all css / pre-processor files.
         requireModuleExtension: true
     },*/
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 37.5, // 换算基数，1rem相当于37.5px,值为37.5时,淘宝插件里面为375/10 =37.5
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: ['font-size'], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
  // webpack-dev-server 相关配置
  devServer: {
    // 设置代理
    hot: true, //热加载
    host: '0.0.0.0', //ip地址
    port: 8092, //端口
    https: false, //false关闭https，true为开启
    open: false, //自动打开浏览器

    proxy: {
      '^/api': {
        //  target: "http://192.168.1.33:8113",
        target: 'http://211.149.146.68:7009',
        ws: true, // 是否启用websockets
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          // 路径重写，
          //  '^/caselibraryv2_0': '/caselibraryv2_0' // 替换target中的请求地址，也就是说以后你在请求http://ip:portr这个地址的时候直接写成/ucs即可。
          '^/api': '',
        },
      },
    },
  },

  pluginOptions: {
    // 第三方插件配置
    // ...
  },
  // 热更新配置 修改css部分热更新还需要注释掉 extract: true
  chainWebpack: (config) => {
    // 修复HMR
    config.resolve.symlinks(true);
    //添加别名
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@componets', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@server', resolve('src/server'));
  },
};
